<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white solids-bottom">
			<block slot="content">
				{{title}}
			</block>
			<block slot="right">
				<text class="cuIcon-like" style="font-size: 40upx;line-height: 60upx;" ></text>
			</block>
		</cu-custom>
		<view>
			<view class="uni-column-item">
				<swiper v-if="imgUrls.length>0" :autoplay="autoplay" :indicator-dots="indicatorDots" :current="index" circular="false" style="height: 480upx;" @change="swiperChange" @animationfinish="animationfinish">
					<swiper-item v-for="(img,key) in imgUrls" :key="key">
						<image :src="img.img" style="height: 480upx;width: 100%;" />
					</swiper-item>
				</swiper>
				<view v-if="imgUrls.length>0" class="uni-column-type">
					<view class="type-g">
						<navigator url="../video/video" class="uni-column-type-item"><text class="cuIcon-playfill"></text>视频</navigator>
						<view class="uni-column-type-item on">图片</view>
					</view>
				</view>
				<view v-if="imgUrls.length>0" class="uni-column-number">{{current}}/{{imgUrls.length}}</view>
				<view v-if="imgUrls.length==0" style="height: 80upx;"></view>
			</view>
		</view>
		<view class="article-meta mb10 boxs" style="background:#FFFFFF url(http://www.shengyisoft.com/Media/web/peoson/sp_bg.png);background-size: cover;">
			<text class="article-author f18 mb10">{{banner.Title}}</text>
			<text class="article-author f14"><text class="price margin-right-sm">{{detail.PriceDisplay}}</text><text class="f12 text-grey">运费：{{detail.ExpressPriceDisplay}}元</text></text>
		</view>
		<view class="article-meta">
			<view class="house-detail clearfix">
				<view class="w100 go-view" @tap="toggleSpec">
					<label class="lable">规格</label>
					<text class="text">{{specSelected.Spec}}</text>
				</view>
			</view>
			<view class="house-lable clearfix">
				<view class="house-lable-box" v-for="childItem in specChildList" :key="childItem.Id">{{childItem.Spec}}</view>
			</view>
		</view>
		<view class="warp30"></view>
		<view class="model-main article-meta">
			<text class="article-author f16 mb10 go-view">评价（{{detail.CommonCount}}）</text>
			<view class="text-center padding-xs text-grey text-xxl" v-if="detail.CommentList.length==0">
				暂无评论
			</view>
			<view class="uni-row model-item" style="padding: 0;" v-for="item in detail.CommentList" :key="item.CreateUser.Id">
				<view class="margin-bottom cu-avatar-box">
					<view class="uni-flex margin-bottom-sm">
						<view class="cu-avatar lg round margin-right" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
						<view>
							<view class="cu-avatar-name">{{item.CreateUser.Name}}<text class="cu-tag bg-red text-xs margin-left-sm" style="height: 30upx;">{{item.CreateUser.RateStatusDisplay}}</text></view>
							<view class="cu-avatar-num">
								<text class="margin-right-sm">{{item.CreateUser.AgencyName==''?'个人':item.CreateUser.AgencyName}}</text>
							{{item.CreateUser.Tel}}</view>
						</view>
					</view>
					<view class="cu-avatar-main margin-bottom-sm">
						{{item.Comment}}
					</view>
				</view>
			</view>
		</view>
		<view class="warp30"></view>
		<view class="article-meta mb10">
			<text class="article-author f16 mb10">商品详情</text>
			<view class="article-content">
				<view class="rich">
					<rich-text :nodes="htmlString"></rich-text>
				</view>
			</view>
		</view>
		<view class="warp120"></view>
		<view class="calltool cu-bar shadow foot tabbar">
			<view class="callbtn">
				<navigator url="#" class="cu-avatar-box">
					<view class="uni-flex">
						<view class="cu-avatar round margin-right-sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
						<view style="flex: 1;">
							<view class="cu-avatar-name">{{detail.CreateUser.Name}}</view>
							<view class="cu-avatar-num">
								{{detail.CreateUser.AgencyName==''?'个人':detail.CreateUser.AgencyName}}
							</view>
						</view>
					</view>
				</navigator>
			</view>
			<view class="toolbtn" style="background: #621708;">
				<view class="iconfont">&#xe6c7;</view>
				<view>电话</view>
			</view>
			<view class="toolbtn" style="background: #941b0c;">
				<view class="iconfont">&#xe658;</view>
				<view>咨询</view>
			</view>
			<view class="toolbtn" style="background: #bc3908;">
				<view class="iconfont">&#xe66b;</view>
				<view>加入购物车</view>
			</view>
			<view class="toolbtn" style="background: #f6aa1c;">
				<view class="iconfont">&#xe66e;</view>
				<view>立即购买</view>
			</view>
		</view>
		<view 
			class="popup spec" 
			:class="specClass"
			@touchmove.stop.prevent="stopPrevent"
			@click="toggleSpec"
		>
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image src="https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg"></image>
					<view class="right">
						<view class="selected">
							价格：<text class="price">¥{{isNaN(specSelected.Price*number)?specSelected.Price:specSelected.Price*number}}</text>
						</view>
						<text class="stock" v-if="specSelected.Qty!=''">库存：{{specSelected.Qty}}件</text>
						<text class="stock" v-if="specSelected.Qty==0">库存：缺货中</text>
						<view class="selected">
							已选：
							<text class="selected-text">
								{{specSelected.Spec?specSelected.Spec:''}}
							</text>
						</view>
					</view>
				</view>
				<view class="attr-list">
					<text class="margin-bottom-sm">分类</text>
					<view class="house-lable">
						<view class="house-lable clearfix">
							<view class="house-lable-box" 
							v-for="(childItem,childIndex) in specChildList" 
							:key="childItem.Id"
							:class="{selected: childItem.selected}"
							@click="selectSpec(childIndex, childItem.Id)">{{childItem.Spec}}</view>
						</view>
					</view>
				</view>
				<view class="attr-list">
					<text class="margin-bottom-sm">数量</text>
					<view class="number">
						<view class="sub" @tap.stop="sub()">
							<view class="icon jian"></view>
						</view>
						<view class="input" @tap.stop="stopPrevent">
							<input type="number" v-model="number" @blur="changeNum" />
						</view>
						<view class="add"  @tap.stop="add()">
							<view class="icon jia"></view>
						</view>
					</view>
				</view>
				<view class="btn-box">
					<button class="btn1" @click="toggleSpec">加入购物车</button>
					<button class="btn2" @click="toggleSpec">立即购买</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniBadge from "../../../components/uni-badge.vue";
	var graceRichText = require("../../../static/richText.js");
	export default {
		components: {
			uniBadge,
		},
		data() {
			return {
				banner:{},
				detail:{},
				specSelected:{Spec:'选择',Price:"",Qty:1},
				showPopupBottomShare:false,
				current:1,
				title: '商品详情',
				htmlString: "",
				specClass: 'none',
				imgUrls: [{
						id:1,
						img: 'https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg'
					},{
						id:2,
						img: 'https://gd3.alicdn.com/imgextra/i3/TB1RPFPPFXXXXcNXpXXXXXXXXXX_!!0-item_pic.jpg_400x400.jpg'
					},{
						id:3,
						img: 'https://gd2.alicdn.com/imgextra/i2/38832490/O1CN01IYq7gu1UGShvbEFnd_!!38832490.jpg_400x400.jpg'
					}
				],
				index: 0, //当前显示索引
				indicatorDots: false, //显示指示点
				autoplay: false,//自动轮播
				specChildList: [],
				number:1,
			}
		},
		onShareAppMessage() {
			return {
				title: "发改委：300万到500万人口大城市全面放宽落户条件",
				path: '/'
			}
		},
		onLoad(event) {
			try {
				this.banner = JSON.parse(decodeURIComponent(event.detailDate));
			} catch (error) {
				this.banner = JSON.parse(event.detailDate);
			}
			console.info(this.banner);
			this.getDetail();
		},
		onReachBottom() {
		},
		mounted(){
	    },
		methods: {
			selectSpec(index, pid){
				let list = this.specChildList;
				list.forEach(item=>{
					this.$set(item, 'selected', false);
				})
				this.$set(list[index], 'selected', true);
				this.specSelected = list[index];
				this.specSelected.Price = parseInt(this.specSelected.Price);
				this.specSelected.Qty = parseInt(this.specSelected.Qty);
				if(this.number>this.specSelected.Qty){
					this.number=this.specSelected.Qty;
				}
				if(this.specSelected.Qty==0){
					this.number=1;
				}
			},
			toggleSpec() {
				if(this.specClass === 'show'){
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				}else if(this.specClass === 'none'){
					this.specClass = 'show';
				}
			},
			sub(index,indexg){
				if(this.number<=1){
					return;
				}
				this.number--;
			},
			// 增加数量
			add(index,indexg){
				if(this.number>=this.specSelected.Qty){
					return;
				}
				this.number++;
			},
			changeNum(){
				if(this.number<=1){
					this.number = 1;
				}
				if(this.number>=this.specSelected.Qty){
					this.number = this.specSelected.Qty;
				}
				if(this.specSelected.Qty==0){
					this.number=1;
				}
			},
			swiperChange:function(e){
				console.info(e.detail);
				this.current = e.detail.current+1;
			},
			animationfinish:function(e){
				console.info(e.detail);
			},
			hidePopup:function(){
				this.showPopupBottomShare = false;
			},
			ShowPopup:function(){
				this.showPopupBottomShare = true;
			},
			show(){
                this.$refs.popupRef.show();
            },
            close(){
                this.$refs.popupRef.close();
            },
			stopPrevent(){},
			getDetail() {
				console.info("start HouseDetail");
				let _this = this;
				let data = {id:this.banner.Id};
				uni.request({
					url: this.AjaxUrl + '/WebApi/GetX3ProductDetail',
					data:data,
					success: (res) => {
						if (res.statusCode == 200) {
							_this.detail = JSON.parse(res.data.Extend);
							console.info(_this.detail);
							_this.htmlString = graceRichText.format(decodeURIComponent(_this.detail.Content));
							_this.specChildList = _this.detail.ProductSpecs;
							_this.specSelected.Price = _this.detail.PriceDisplay.substring(0,_this.detail.PriceDisplay.length-1);
						}
					},
					fail: (e) => {
						console.info(e);
					}
				})
			},
		}
	}
</script>

<style lang="less">
	@font-face {font-family:"HMfont-home";src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOEAAsAAAAAB7wAAAM1AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqDAIJNATYCJAMQCwoABCAFhG0HPhu1BsiOw7jha84s8T+CgOyq6unevTlAeAkRhAhQBjj8eJfmMg/oB5whSgaFspy7AqbpwE3Py3/j9j+X07uGyFHr21lua9HYi9rUCzDeGtBYmw4o0AJJ0BvGLmiJxyEAC3yIQhSVPL9BF4U5TgBi7ChtQzfjQKFYWEdgrFiqEBsxoGurtMfAhuD74g8JQgcNg8ScWjf8xoPz7/nfD8iFpoV0eQi86XQAWwUSiAIUiJGVhgEaUSAKiYXau0kKoKOjwVRthd8PmExIBRvmWH95INCQIIyYqVYAJKGghO/5Dg4B3wtxaPD9QAoS4IOM1gEzYBbAMkT16iIQGPxsopS5ScAcK23LiaBDpzyk1aGLHtsvhVrL7adDD55016wPXnDfcr7T3lcE2TVcP2fNhZM7WeiEhVp44vx9C5vVD6+eEgaLTZvEot3HL1lawlnXLK3XnISDllbWwmrmGjlRLdxq2bpme1RAeqXtzWh6g0F//wCCnRiN2diwr2+Yse3iEs20g05Q5tT0BikOXwKf79vsoEvb6p6xjVhHP92nwDJmX+9hwsf26dXbPiNvZ/98x67/+5T+ev0aWxbXCwOX41zLxia+O73B6Y57fN1u6GvN+Zmbc8XITigTAcB0Rl6X8QB4hDgEpoXypZz2q37D5FVnVa9t1n/dUgHw8uKMq9BmWqjoJoP3zevM+zG8jmVKE5hKpRShw9WTFZW04D7TscAC+B0RcOD9FHLnzqkg0HFOQMMMb5DoBKGKGgUGLEkCIzq5YEEkpastcWQyDYQyByJYBkBgx2nQsOEaSOx4girqOzDgwj8wYickWNAiHLe0JESMsiicTLaQh84PBm6WKlst/TD9hXQV25wWBLQP4jJw435MXD58RynxFDPKT30golBxluAtOI3iOMOcs5Bc2fFF8sPd2OFVBO24WQJ9CmEIG4HwQAb4ARmFS0aK8qoL/cLnXyA0FTE23FBSZf+AYEqCzpF4YojrgN5J004lt/LKFD7RHDAVQYEMh8lIQErAICImJgOZWD0ohHARdhg5wJdzSKxVaXhX6c7y8uQN1wAWmLOU0IQUShiQo0fZTceadqaMdP2uXwEAAAAA') format('woff2');}
	
	.icon {
		font-family:"HMfont-home" !important;
		font-size:36upx;
		font-style:normal;
		color:#000000;
		&.jia {
			&:before{content:"\e641";}
		}
		&.jian {
			&:before{content:"\e643";}
		}
		&.shanchu {
			&:before{content:"\e6a4";}
		}
	}
	.house-detail-box{
		background: #ff4a4a;
		color: #fff;
		padding: 14upx 0;
		border-radius: 10upx;
		&>.house-detail-box-div{
			width: 33.3%;
			float: left;
			border-right: 2upx solid #fff;
			text-align: center;
			box-sizing: border-box;
			&:last-child{
				border-right:0;
			}
			.house-detail-box-div-name{
				padding-bottom: 10upx;
			}
			.house-detail-box-div-name,.house-detail-box-div-num{    
				display: block;
				line-height: 1;
			}
		}
	}
	.house-detail{
		.w100{
			float: left;
			width: 100%;
			display: flex;
			margin-bottom: 10upx;
			.lable{
				display: inline-block;
				padding-right: 10upx;
				color: #999999;
				box-sizing: content-box;
			}
			.text{
				flex: 1;
				padding-left: 10upx;
			}
		}
	}
	.house-lable{
		height: 44upx;
		overflow: hidden;
		.house-lable-box{
			display: inline-block;
			background:#f2f2f2;
			color:#999999;
			border: #f2f2f2 solid 2upx;
			border-radius: 6upx;
			padding: 8upx 14upx;
			line-height: 1;
			float: left;
			margin: 0 10upx 10upx 0;
			font-size: 24upx;
			&.selected{
				background: #ffffff;
				color: #ff4a4a;
				border-color: #ff4a4a;
			}
		}
	}
	.uni-column-item {
		.uni-column-number{
			color: #fff;
			position: absolute;
			right: 40upx;
			bottom: 60upx;
			background: #00000075;
			padding: 0 20upx;
			border-radius: 25upx;
		}
		.uni-column-type{
			position: absolute;
			left: 0;
			bottom: 55upx;
			width: 100%;
			text-align: center;
			.type-g{
				display: inline-block;
				.uni-column-type-item{
					display: inline-block;
					background: #666666;
					padding: 0 20upx;
					border-radius: 25upx;
					color: #ffffff;
					margin: 5upx;
					font-size: 24upx;
					line-height: 2;
					&.on{
						background:#ff4a4a;
					}
					.cuIcon-playfill{
						margin-left: -10upx;
					}
				}
			}
		}
	}
	.cu-avatar-box{
		.cu-avatar-name{
			font-size: 32upx;
			color: #333333;
			line-height: 48upx;
		}
		.cu-avatar-num{
			font-size: 28upx;
			color: #999999;
			line-height: 48upx;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}
	}
	.foot {
		position: fixed;
		width: 100%;
		height: 90upx;
		min-height: 90upx;
		left: 0upx;
		bottom: 0upx;
		overflow: hidden;
		z-index: 999;
		box-shadow: 0px 0px 5px #999;
	}
	.banner {
		height: 360upx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.banner-img {
		width: 100%;
	}

	.banner-title {
		max-height: 84upx;
		overflow: hidden;
		position: absolute;
		left: 30upx;
		bottom: 30upx;
		width: 90%;
		font-size: 32upx;
		font-weight: 400;
		line-height: 42upx;
		color: white;
		z-index: 11;
	}

	.article-meta {
		padding: 30upx 30upx;
		color: #333333;
		display: block;
		background: #FFFFFF;
		&.boxs{
			margin: -25px 30upx 0;
			box-shadow: 0px 0px 5px #dddddd;
			position: relative;
		}
		.YZBox{
			.YZBtn{
				margin: 0;
			}
		}
	}
	.mb10{
		margin-bottom: 20upx;
	}
	.rich{
		font-size: 28upx;
		padding-bottom: 20upx;
		color: #999999;
	}

	.article-text {
		font-size: 26upx;
		line-height: 50upx;
		margin: 0 20upx;
	}

	.article-author{
		font-size: 48upx;
		display: block;
		line-height: 1.5;
		color: #333333;
		&.f18{
			font-size: 36upx;
			font-weight: 500;
			text-align: justify;
		}
		&.f14{
			font-size: 28upx;
			font-weight: normal;
			.price{
				color: #ff4a4a;
				font-size: 32upx;
			}
			.text-grey{
				font-size: 24upx;
				float: right;
			}
		}
		&.f16{
			font-size: 32upx;
			font-weight: normal;
		}
	}
	.article-time{
		display: block;
		font-size: 28upx;
		line-height: 2;
	}

	.article-content {
		padding: 0;
		overflow: hidden;
		font-size: 30upx;
		background: #FFFFFF;
		position: relative;
	}
	.article-content.pl0.pr0 {
		padding-left: 0;
		padding-right: 0;
	}
	.go-view{
		position: relative;
	}
	.go-view:after{
		font-family: uniicons;
		content: '\E583';
		position: absolute;
		right: 0upx;
		top: 50%;
		color: #333333;
		font-size: 32upx;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	.uni-column-item {
		flex: 1;
		justify-content: left;
		height: 100%;
		position: relative;
	}
	.uni-list{
		background: #f9fafc;
		border-left: 1px solid #c8c7cc;
		border-right: 1px solid #c8c7cc;
		border-radius: 5px;
	}
	.calltool{
		display:flex;
		background: #FFFFFF;
		height: 100upx;
		.callbtn{
			width:250upx;
			height: 100upx;
			text-align: left;
			padding: 10upx 0;
			box-sizing: border-box;
			.cu-avatar-name,.cu-avatar-num{
				line-height: 40upx;
				font-size: 28upx;
				
			}
			.cu-avatar-num{
				font-size: 24upx;
			}
		}
		.toolbtn{
			flex: 1;
			text-align: center;
			height: 100upx;
			padding: 10upx 0;
			color: #FFFFFF;
			view{
				font-size: 24upx;
				&.iconfont{
					font-size: 40upx;
					color: #FFFFFF;
					line-height: 1;
				}
			}
		}
	}
	.bottom-title{
		padding: 20upx 0 0;
		font-size: 32upx;
		font-weight: 600;
		text-align: center;
	}
	.bottom-content{
		.cu-list.grid>.cu-item text{
			color:#666666;
		}
		.grid.col-2>navigator{
			width:50%
		}
	}
	.bottom-btn{
		padding: 20upx 0;
		border-top: 12upx solid #efefef;
		font-size: 32upx;
		text-align: center;
	}
	
	/* 规格选择弹窗 */
	.attr-content{
		padding: 10upx 30upx;
		.a-t{
			display: flex;
			image{
				width: 170upx;
				height: 170upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 8upx;;
			}
			.right{
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				font-size: 24upx + 2upx;
				color: #606266;
				line-height: 42upx;
				.price{
					font-size: 32upx;
					color: #fa436a;
					margin-bottom: 10upx;
				}
				.selected-text{
					margin-right: 10upx;
				}
			}
		}
		.attr-list{
			display: flex;
			flex-direction: column;
			font-size: 28upx + 2upx;
			color: #606266;
			padding-top: 30upx;
			padding-left: 10upx;
		}
		.item-list{
			padding: 20upx 0 0;
			display: flex;
			flex-wrap: wrap;
			text{
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				font-size: 28upx;
				color: #303133;
			}
			.selected{
				background: #fbebee;
				color: #fa436a;
			}
		}
	}
	
	
	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1025;
		
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}
		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;
			.btn-box{
				position: absolute;
				bottom: 0;
				padding: 20upx 30upx;
				display: flex;
				margin: 0 -30upx;
				width: 100%;
				box-sizing: border-box;
			}
			.btn1,.btn2{
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: #ff4a4a;
				font-size: 30upx;
				color: #fff;
				margin: 30upx 1% 20upx;
				flex: 1;
				width: 48%;
				border: #ff4a4a 2upx solid;
			}
			.btn2{
				background: #fff;
				color: #ff4a4a;
			}
		}
		@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}
			100% {
				transform: translateY(0%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(120%);
			}
		}
	}
	.number{
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 30upx;
		.input{
			width: 60upx;
			height: 60upx;
			margin: 0 10upx;
			background-color: #f3f3f3;
			input{
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				font-size: 26upx;
			}
		}
		.sub ,.add{
			width: 45upx;
			height: 45upx;
			background-color: #f3f3f3;
			border-radius: 5upx;
			.icon{
				font-size: 22upx;
				width: 45upx;
				height: 45upx;
				display: flex;
				justify-content: center;
				align-items: center;
				
			}
		}
	}
</style>
